<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tip{
            color: red;
            display: none;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>
<body>
    <!-- action属性表示提交到服务器的路径 -->
    <!-- 1 验证事件不在提交按钮上
         数据由表单元素提交，按钮是为表单服务
         所以验证在表单上 -->
    <!-- 2 在submit事件中，如果返回值为false
         则不能提交，如果为true，则可以提交 -->
    <form action="" onsubmit="return sub()">
        <!-- 表单中元素的name是用于获取数据的名称 -->
        <input type="text" name="aa" id="aa">
        <!-- id用于js/css中定位这个元素 -->
        <input type="submit" value="提交">
        <!-- 添加一个信息提示元素 -->
        <div id="tip">内容不能为空</div>
    </form>
    <script>
        // 编写用于提交事件执行的函数
        function sub(){
            if($("#aa").val() == ""){
                $("#tip").attr("style","display:block");
                //文本框元素获取焦点
                $("#aa").focus();
                return false;
            }
            return true;
        }
    </script>
</body>
</html>